<template>
  <div class="box">
    <van-sticky>
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-sticky>

    <div @click="onclickctiy" class="van-cell">
      <div class="van-cell-item">
        <div style="flex: 0.9; line-height: 1.5rem">
          <van-icon color="#39d167" name="map-marked" style="font-size: 1.3rem" />
          <span style="margin-left: 0.5rem">请填写收货地址</span>
        </div>
        <van-icon color="#ccc" name="arrow" style="font-size: 1rem; line-height: 1.5rem" />
      </div>
    </div>
    <!-- 商品 -->
    <div class="goods">
      <div
        v-for="(item, index) in orderList"
        :key="index"
        style="margin-bottom: 0.5rem; background-color: #fff; padding: 1rem; border-radius: 1rem"
      >
        <div style="margin-bottom: 1rem">
          <span style="font-weight: 600; font-size: 1rem">{{ item.title }}</span>
          <button
            style="
              border: 1px solid #39d167;
              padding: 0 0.4rem;
              border-radius: 1rem;
              font-size: 0.8rem;
              color: #39d167;
              margin-left: 0.5rem;
            "
          >
            √ 认证药房
          </button>
        </div>
        <div v-for="(i, ind) in item.goods" :key="ind" style="margin-bottom: 1rem">
          <div>
            <p style="float: left">{{ i.name }}</p>
            <p style="float: right">￥{{ i.price }}</p>
          </div>
          <div style="clear: both; text-align: right; color: #bdbdbd; line-height: 1.5rem">
            x {{ i.num }}
          </div>
        </div>
        <div>
          <p style="float: left">运费 <span style="color: #bdbdbd">满￥69包邮</span></p>
          <p style="float: right">￥0</p>
        </div>
        <p style="clear: both; text-align: right; line-height: 2rem">
          共计{{ item.goods.length }}件商品 小计:<span style="color: red"
            >￥{{ zprice[index] }}</span
          >
        </p>
      </div>
    </div>
    <div class="vip">
      <div style="padding: 0.5rem">
        <img src="./vip.gif" alt="" />
        <div style="line-height: 2rem">
          <p style="float: left; font-weight: 600">开通会员，本单立省16.2元</p>
          <div @click="addvip">
            <van-checkbox
              v-model="checked"
              checked-color="#39d167"
              label-position="left"
              style="float: right"
              ><span style="color: red">首月￥13.9</span></van-checkbox
            >
          </div>
        </div>
        <p style="clear: both; color: #bdbdbd; font-size: 0.8rem">
          连续包月，次月自动续费￥26.9（原价￥199.0）， 可随时在个人中心设置中取消会员自动扣款
        </p>
        <div style="margin-top: 0.5rem">
          <el-popover
            :visible="visible"
            placement="bottom-end"
            content="请先阅读协议"
            style="background-color: #000"
          >
            <template #reference>
              <van-checkbox
                @click="addagreement"
                v-model="agreement"
                shape="square"
                style="float: left"
                checked-color="#39d167"
                >开通前请阅读<span style="color: blue">《连续订阅服务协议》</span></van-checkbox
              >
            </template>
          </el-popover>
        </div>
      </div>
      <div style="background: #fff">
        <img src="./tok.gif" style="width: 100%; margin-top: 1rem" alt="" />
        <div style="float: right; line-height: 3rem; margin-right: 0.5rem; color: #666">
          全部14项权益 >
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
    <div
      style="
        width: 95%;
        margin-top: 0.5rem;
        height: 2.5rem;
        background-color: #fff;
        border-radius: 0.5rem;
      "
      v-if="checked"
    >
      <img src="./discount.gif" alt="" width="100%" style="margin-top: 0.3rem" />
    </div>
    <van-submit-bar :price="zprices * 100" button-text="去支付" @submit="onSubmit">
      <div style="width: 35%">
        <div style="float: left"><img src="./客服.png" alt="" /></div>
        <span style="clear: both; line-height: 2rem; color: #666">联系客服</span>
      </div>
    </van-submit-bar>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { showToast } from 'vant'
const onClickLeft = () => history.back()
const route = useRoute()
const orderList = ref(JSON.parse(route.query.data as string))
const zprice = ref<any>([])
const zprices = ref(0)
const checked = ref(false)
const agreement = ref(false)
const visible = ref(false)
const router = useRouter()
console.log(orderList.value);



const onClickLink = () => showToast('修改地址')
// console.log(orderList.value)
const addagreement = () => {
  if (agreement.value == true) {
    visible.value = false
  } else {
    visible.value = true
  }
}
const onclickctiy = () => {
  window.location.href = '/address'
}
const addvip = () => {
  if (checked.value) {
    zprices.value += 13.9
    if (agreement.value == false) {
      visible.value = true
    }
  } else {
    zprices.value -= 13.9
    visible.value = false
  }
}

const getlist = () => {
  orderList.value.forEach((item: any, index: any) => {
    item.goods.forEach((i: any, ind: number) => {
      const convertedNumber = parseFloat(i.price)
      zprice.value[index] = convertedNumber * i.num
    })
  })
  zprice.value.forEach((item: any) => {
    zprices.value += item
  })
}

const onSubmit = () => {
  router.push({
    path: '/payment',
    query:{
      data: JSON.stringify(orderList.value),
      zprice: zprices.value.toFixed(2)
    }
  })
}
getlist()
</script>
<style lang="scss" scoped>
.box {
  width: 100vw;
  height: 120vh;
  background-color: #f2f2f2;
  font-size: 0.9rem;
}
.vip {
  width: 95%;
  background-color: #fff;
  border-radius: 0.5rem;
}
.goods {
  width: 95%;
  margin-top: 0.5rem;
}
.van-cell {
  margin-top: 0.5rem;
  width: 95%;
  height: 3.5rem;
  border-radius: 1rem;
  position: relative;
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.6rem;
    background-image: url('./1.gif');
  }
}
.van-cell-item {
  display: flex;
  width: 100%;
}
</style>
